<template>
  <div class="my">
      <!-- 顶部导航 -->
      <div class="nav_bar">
        <!-- 自定义样式 -->
        <van-config-provider :theme-vars="color">
          <van-nav-bar fixed safe-area-inset-top :border="false" z-index="2">
            <template #left>
              <slot name="icon">
                <van-icon name="wap-nav" size="20" color="white"></van-icon>
              </slot>
            </template>
            <template #title>
              <div
                class="tx"
                :style="fl ? 'display: block;' : 'display: none;'"
              >
                <van-image
                  :src="user.avatar"
                  round
                  width="28"
                ></van-image>
              </div>
            </template>
            <template #right>
              <van-icon
                name="share-o"
                size="20"
                color="white"
                @click="fx"
              ></van-icon>
            </template>
          </van-nav-bar>
        </van-config-provider>
      </div>
    <!-- 个人介绍 -->
    <div class="introduce">
      <!-- 背景 -->
      <div class="bg"></div>
      <div class="box">
        <div class="box_top">
          <div class="head">
            <van-image :src="user.avatar" round width="80"></van-image>
          </div>
          <div class="name">
            <p>{{ user.name }}</p>
            <p>小红书号:1000{{ user.id }}</p>
          </div>
        </div>
        <!-- 签名 标签 -->
        <div class="box_mid">
          <div class="txt">{{ user.signature }}</div>
          <div class="table">
            <span
              v-for="item in ['19岁', '中国', '前端开发工程师', '游戏博主']"
              :key="item"
              >{{ item }}
            </span>
          </div>
        </div>
        <!-- 粉丝数 -->
        <div class="box_bot">
          <div class="num">
            <div v-for="item in ['关注', '粉丝', '获赞与收藏']" :key="item">
              <p>17</p>
              <p class="txt">{{ item }}</p>
            </div>
          </div>
          <div class="set">
            <span>编辑资料</span>
            <span>
              <van-icon name="setting-o" size="20"></van-icon>
            </span>
          </div>
        </div>
      </div>
    </div>
    <!-- 笔记信息 -->
    <div class="content">
      <!-- 导航 nav -->
      <van-tabs class="tabs" v-model:active="index" swipeable @change="onClick">
        <van-tab title="笔记">
          <ul>
            <li>
              <note v-for="item in my1" :key="item.id" :note="item" :num="num"></note>
            </li>
            <li>
              <note  v-for="item in my2" :key="item.id" :note="item" :num="num"></note>
            </li>
          </ul>
        </van-tab>
        <van-tab title="收藏">
          <ul>
            <li>
              <note v-for="item in support1" :key="item.id" :note="item" :fla="flag" :num="num"></note>
            </li>
            <li>
              <note  v-for="item in support2" :key="item.id" :note="item" :fla="flag" :num="num"></note>
            </li>
          </ul>
        </van-tab>
      </van-tabs>
    </div>
    <!-- 分享面板 -->
    <van-share-sheet
      v-model:show="showShare"
      title="分享至"
      :options="options"
    ></van-share-sheet>
  </div>
</template>

<script>
import { NavBar, ConfigProvider, ShareSheet, Image, Tab, Tabs } from "vant";
import { reactive, ref, onMounted, onUnmounted } from "vue";
import Note from "@/components/Note.vue";
export default {
  name: "Per",
  components: {
    [NavBar.name]: NavBar,
    [ConfigProvider.name]: ConfigProvider,
    [ShareSheet.name]: ShareSheet,
    [Image.name]: Image,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    Note,
  },
  props: {
    data: {
      type: Object,
    },
    num : {
      type : Number,
      default : 0
    }
  },
  setup(props) {
  
    // 数据
    let user = reactive(props.data.user);
    let myNotes = reactive(props.data.myNotes);
    let my1 = reactive([]);
    let my2 = reactive([]);
    let supportNotes = reactive(props.data.notes);
    let support1 = reactive([]);
    let support2 = reactive([]);
    // 将笔记数据分成两列
    for (let i = 0; i < myNotes.length; i++) {
      if (i < myNotes.length / 2) {
        my1.push(myNotes[i]);
      } else {
        my2.push(myNotes[i]);
      }
    }
    // console.log(supportNotes);
    for (let i = 0; i < supportNotes.length; i++) {
      if (i < supportNotes.length / 2) {
        support1.push(supportNotes[i]);
      } else {
        support2.push(supportNotes[i]);
      }
    }

    // 顶部组件样式 效果
    let color = reactive({
      navBarBackgroundColor: "rgba(0,0,0,0)",
    });
    let fl = ref(false);
    function getScroll() {
      
      let top = document.body.scrollTop;
      if (top > 95) {
        color.navBarBackgroundColor = "rgba(0,0,0,1)";
        fl.value = true;
      } else if (top > 75) {
        color.navBarBackgroundColor = "rgba(0,0,0,.7)";
      } else if (top > 55) {
        color.navBarBackgroundColor = "rgba(0,0,0,.5)";
      } else if (top > 25) {
        color.navBarBackgroundColor = "rgba(0,0,0,.3)";
      } else if (top > 15) {
        color.navBarBackgroundColor = "rgba(0,0,0,.1)";
      } else if (top < 9) {
        fl.value = false;
        color.navBarBackgroundColor = "rgba(0,0,0,0)";
      }
    }
    onMounted(() => {
      // console.log("滚动条");
      window.addEventListener("scroll", getScroll, true);
    });
    onUnmounted(() => {
      // console.log("结束");
      window.removeEventListener("scroll", getScroll, true);
    });

    // 分享弹窗数据
    let showShare = ref(false);
    let options = reactive([
      [
        { name: "微信", icon: "wechat" },
        { name: "朋友圈", icon: "wechat-moments" },
        { name: "微博", icon: "weibo" },
        { name: "QQ", icon: "qq" },
      ],
      [
        { name: "复制链接", icon: "link" },
        { name: "分享海报", icon: "poster" },
        { name: "二维码", icon: "qrcode" },
        { name: "小程序码", icon: "weapp-qrcode" },
      ],
    ]);
    function fx() {
      showShare.value = !showShare.value;
    }
    // 赞过 默认是 选中
    let index = ref(0);
    let flag = ref(false);
    function onClick() {
      if (index.value == 1) {
        flag.value = true;
      } else {
        flag.value = false;
      }
    }
    
    return {
      color,
      getScroll,
      fl,
      showShare,
      options,
      fx,
      flag,
      index,
      onClick,
      user,
      my1,my2,
      support1,support2,
    };
  },
};
</script>

<style lang="scss" scoped>
.my {
  width: 100vw;
  background: rgb(248, 248, 248);
  margin-bottom: 35px;

  .nav_bar {
    transition: all 0.5s;

    .tx {
      display: none;
      transition: all 0.5s;
    }
  }

  // 简介
  .introduce {
    width: 100%;
    position: relative;

    .bg {
      width: 100%;
      height: 36vh;
      margin-bottom: -5px;
      background: url("2.jpg") no-repeat 0 0/120%;
      opacity: 0.7;
      z-index: -99;
      filter: blur(2px);
    }

    .box {
      width: 100%;
      padding: 3%;
      color: #fff;
      position: absolute;
      top: 50px;
      left: 0;

      // 头像 name
      .box_top {
        width: 100%;
        display: flex;
        align-items: center;

        // 头像
        .head {
          position: relative;
        }

        // 头像上的黄色背景加号
        .head::before {
          content: "+";
          display: block;
          width: 20px;
          height: 20px;
          background: yellow;
          border-radius: 50%;
          color: #000;
          font-size: 18px;
          font-weight: bold;
          text-align: center;
          position: absolute;
          bottom: 0;
          right: 0;
          z-index: 1;
        }

        // box 头部的文字
        .name {
          padding-left: 5%;
          display: flex;
          flex-direction: column;
          align-items: flex-start;

          p:nth-child(1) {
            font-weight: 525;
            font-size: 18px;
          }

          p:nth-child(2) {
            font-weight: 525;
            text-align: left;
            transform: scale(0.7);
            transform-origin: 0 0;
            color: rgb(58, 58, 58);
          }
        }
      }

      // 签名 标签
      .box_mid {
        padding-top: 2%;
        font-weight: 100;

        .table {
          padding-top: 1%;

          span {
            display: inline-block;
            background: rgba(46, 43, 43, 0.5);
            padding: 2px 8px;
            border-radius: 20px;
            transform: scale(0.7);
            transform-origin: 0 0;
            // 使margin为负数 解决 缩放后 间隙问题
            $list: -7px, -6px, -24px;

            @each $var in $list {
              $index: index($list, $var);

              &:nth-child(#{$index}) {
                margin-right: #{$var};
              }
            }
          }
        }
      }

      // 关注 粉丝 数
      .box_bot {
        width: 100%;
        display: flex;
        justify-content: space-between;

        .num {
          flex: 1;
          display: flex;
          justify-content: space-around;

          div {
            margin-right: 5%;
            display: flex;
            flex-direction: column;
            align-items: center;

            .txt {
              color: rgb(238, 236, 236);
            }
          }
        }

        .set {
          display: flex;
          justify-content: flex-end;
          flex: 1;

          span {
            margin-left: -12px;
            display: inline-block;
            padding: 3% 10%;
            border: 1px solid white;
            border-radius: 22px;
            // 字符间距
            letter-spacing: 2px;
            transform: scale(0.7);
          }
        }
      }
    }
  }

  .content {
    width: 100%;

    .tabs {
      border-radius: 20px;
      overflow: hidden;
    }

    ul {
      width: 100%;
      padding: 2%;
      display: flex;
      justify-content: space-between;
      li {
        display: flex;
        flex-direction: column;
      }
    }
  }
}
</style>